<!-- 市级 - 区县 消防安全排查统计 -->
<template>
  <div>
    <div class="header">
      <div class="title">
        <div> 消防安全排查统计</div>
        <div class="table-settings">
          <ImportSetting
            :tableData="tableData"
            :tableColumns="tableColumns"
            :wscolsList="wscolsList"
            v-if="true"
          />
        </div>
      </div>
      <!-- 市级展示的查询 -->
      <div class="search" v-if="data.cityToken === '110000'">
        <!-- 选择区县 -->
        <a-space>
          <span>请选择市区：</span>
          <a-select
            ref="select"
            v-model:value="value1"
            style="width: 120px"
            :options="options"
            @change="handleChange"
          />
        </a-space>

        <br />
        <div class="space">
          <a-space class="space-item">
            <span class="title">建筑层数> </span>
            <a-input-number
              v-model:value="csValue"
              :keyboard="keyboard"
              addon-after="层"
              :min="1"
            />
          </a-space>
          <a-space class="space-item">
            <span class="title">出租房间数> </span>
            <a-input-number
              v-model:value="roomsValue"
              :keyboard="keyboard"
              addon-after="间"
              :min="1"
            />
          </a-space>
          <a-space class="space-item">
            <span class="title">出租房间居住人数>3 </span>
            <a-input-number
              v-model:value="peoplesValue"
              :keyboard="keyboard"
              addon-after="人"
              :min="1"
            />
          </a-space>
          <a-space class="space-item">
            <span class="title">疏散楼梯少于 </span>
            <a-input-number
              v-model:value="stairsValue"
              :keyboard="keyboard"
              addon-after="部"
              :min="1"
            />
          </a-space>
          <a-space class="space-item">
            <span class="title">首层安全出口少于 </span>
            <a-input-number
              v-model:value="fistexitnumValue"
              :keyboard="keyboard"
              addon-after="个"
              :min="1"
            />
          </a-space>
        </div>
      </div>
      <div class="searchBtn" v-if="data.cityToken === '110000'">
        <a-button class="resetBtn" @click="resetFn">重置</a-button>
        <a-button type="primary" @click="queryFn">查询111</a-button>
      </div>
    </div>
    <a-table
      :dataSource="tableData"
      :columns="tableColumns"
      :pagination="false"
      bordered
      :loading="loading"
    >
      <!-- <template #hc_jd>
        <div>
          <span> 三层及以上出租住人<br />疏散楼梯少于2部<br />首层安全出口少于2个 </span>
        </div>
      </template> -->
      <!-- vue3 中的写法 -->
      <!-- <template #headerCell="{ column }">
        <template v-if="column.key === 'vcount'">
          <span> 三层及以上出租住人<br />疏散楼梯少于2部<br />首层安全出口少于2个 </span>
        </template>
      </template> -->
    </a-table>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, toRefs, onMounted } from 'vue';
  import ImportSetting from './ImportSetting.vue';
  import { getFireCityCountPostList, getFireCountPostList } from '/@/api/demo/system';
  import { iTableData, iTableColumns } from './types/table';
  import { iParams } from './types/params';

  import { useUserStore } from '/@/store/modules/user';
  // import { t } from '/@/hooks/web/useI18n';
  // 转义地区编码
  import { selectClassFlyDict } from '/@/dict/bj_dict';
  let data = reactive<{
    tableData: iTableData[];
    tableColumns: iTableColumns[];
    wscolsList: { wch: number }[];
    id: number;
    loading: Boolean;
    keyWorld: String;
  }>({
    // 表格数据
    tableData: [],
    tableColumns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        width: 100,
      },
      {
        title: '行政区代码',
        dataIndex: 'xzqdm',
        key: 'xzqdm',
        align: 'center',
        width: 170,
      },
      {
        title: '行政区名称',
        dataIndex: 'name',
        key: 'name',
        align: 'center',
        width: 170,
      },
      {
        title: '已排查',
        dataIndex: 'ypc',
        key: 'ypc',
        align: 'center',
        width: 170,
      },
      {
        title: '正在排查',
        dataIndex: 'pcz',
        key: 'pcz',
        align: 'center',
        width: 170,
      },
      // 三层以上。。。。
      {
        // slots: { title: 'vcount' },
        title: '满足条件房屋',
        dataIndex: 'vcount',
        key: 'vcount',
        align: 'center',
        width: 170,
      },
    ],
    id: null,
    loading: true,
    keyWorld: '',
    cityToken: '', // 判断是不是市区 110000 是北京市 展示搜索宽
    wscolsList: [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
  });
  const value1 = ref<string>('北京市'); // 存储select 的 默认值
  const csValue = ref<string>('2'); // 建筑层数
  const peoplesValue = ref<string>(''); // 数字 居住人数
  const fistexitnumValue = ref<string>('2'); // 数字 首层电梯出口
  const stairsValue = ref<string>(''); // 数字 楼梯数量
  const roomsValue = ref<string>(''); // 数字 出租房间数

  const keyboard = ref<boolean>(true); // 使用 keyboard 属性可以控制键盘行为
  const options = ref<SelectTypes['options']>([
    {
      value: '110000',
      label: '北京市',
    },
    {
      value: '110101',
      label: '东城区',
    },
    {
      value: '110102',
      label: '西城区',
    },
    {
      value: '110105',
      label: '朝阳区',
    },
    {
      value: '110106',
      label: '丰台区',
    },
    {
      value: '110107',
      label: '石景山区',
    },
    {
      value: '110108',
      label: '海淀区',
    },
    {
      value: '110109',
      label: '门头沟区',
    },

    {
      value: '110111',
      label: '房山区',
    },
    {
      value: '110112',
      label: '通州区',
    },
    {
      value: '110113',
      label: '顺义区',
    },
    {
      value: '110114',
      label: '昌平区',
    },

    {
      value: '110115',
      label: '大兴区',
    },
    {
      value: '110116',
      label: '怀柔区',
    },
    {
      value: '110117',
      label: '平谷区',
    },
    {
      value: '110118',
      label: '密云区',
    },

    {
      value: '110119',
      label: '延庆区',
    },
    {
      value: '110171',
      label: '北京市经济技术开发区',
    },
  ]);
  let { tableData, tableColumns, loading, keyWorld, wscolsList } = toRefs(data);
  function getAreaToken() {
    const { getUserInfo } = useUserStore();
    data.cityToken = (getUserInfo.district && getUserInfo.district.id) || '110000';
    // 保存select 中的值
    data.id = (getUserInfo.district && getUserInfo.district.id) || '110000';
    // 根据缓冲中的 市、区县代码 获取 市、区县名称
    let name: string = selectClassFlyDict(data.id);
    // 把 市、区县名称 赋值给 下拉框 进行请求
    value1.value = name;
  }
  // select 选中 回调
  function handleChange(value: string) {
    data.keyWorld = value;
  }
  // 查询方法
  function queryFn() {
    data.id = keyWorld.value === '' ? data.cityToken : keyWorld;
    // console.log('@id=', data.id);
    getData();
  }
  // 重置
  function resetFn() {
    csValue.value = '';
    peoplesValue.value = '';
    fistexitnumValue.value = '';
    stairsValue.value = '';
    roomsValue.value = '';
  }
  async function getData() {
    // 北京市 的数据
    if (data.id === '110000') {
      let params: iParams = {
        id: `xf_tj_pc_${data.id}`,
        cs: csValue.value === '' || csValue.value === null ? '0' : `${csValue.value}`, // 建筑层数 >
        peoples:
          peoplesValue.value === '' || peoplesValue.value === null ? '0' : `${peoplesValue.value}`, // 居住人数 >
        rooms: roomsValue.value === '' ? '0' : `${roomsValue.value}`, // 出租房间数>
        fistexitnum:
          fistexitnumValue.value === null || fistexitnumValue.value === ''
            ? '9999'
            : `${fistexitnumValue.value}`, // <
        stairs:
          stairsValue.value === '' || stairsValue.value === null ? '9999' : `${stairsValue.value}`, // <
      };
      // console.log('@市级参数', params);
      let res: any = await getFireCityCountPostList(params);
      // console.log('@res--', res);

      if (res || res.length > 0) {
        data.loading = false;
        res.forEach((item: any, index: number) => {
          item.name = selectClassFlyDict(item.xzqdm);
          item.index = index + 1;
        });
        // console.log('data', data);
        data.tableData = [...res];
      }
    } else {
      // 北京市 下面 区县的 数据
      let params: iParams = {
        id: `xf_tj_pc_qx`,
        xzqdm: `${data.id}`,
        cs: csValue.value === '' || csValue.value === null ? '0' : `${csValue.value}`, // 建筑层数 >
        peoples:
          peoplesValue.value === '' || peoplesValue.value === null ? '0' : `${peoplesValue.value}`, // 居住人数 >
        rooms: roomsValue.value === '' ? '0' : `${roomsValue.value}`, // 出租房间数>
        fistexitnum:
          fistexitnumValue.value === null || fistexitnumValue.value === ''
            ? '9999'
            : `${fistexitnumValue.value}`, // <
        stairs:
          stairsValue.value === '' || stairsValue.value === null ? '9999' : `${stairsValue.value}`, // <
      };
      // console.log('@市级参数', params);
      let res: any = await getFireCountPostList(params);
      // console.log('@res--', res);

      if (res || res.length > 0) {
        data.loading = false;
        res.forEach((item: any, index: number) => {
          item.name = selectClassFlyDict(item.xzqdm);
          item.index = index + 1;
        });
        // console.log('data', data);
        data.tableData = [...res];
      }
    }
  }
  onMounted(() => {
    getAreaToken();
    getData();
  });
</script>

<style lang="less">
  .header {
    width: 100%;
    // height: 250px;
    display: flex;
    // border: 1px solid red;
    line-height: 40px;
    justify-content: space-between;
    flex-direction: column;
    .title {
      display: flex;
      justify-content: space-between;
    }
    .search {
      // border: 1px solid green;
      height: 170px;
      .space {
        // border: 1px solid red;
        padding: 10px 20px;
        display: flex;
        // justify-content: space-between
        flex-wrap: wrap;
        .space-item {
          line-height: 32px;
          margin-bottom: 10px;
          .title {
            text-align: right;
            width: 150px;
            display: block;
          }
          // line-height: 20px;
        }
      }
    }
    .searchBtn {
      display: flex;
      // flex-direction: row-reverse;
      align-self: flex-end;
      padding: 0 15px;
      .resetBtn {
        margin-right: 10px;
      }
    }
    .table-settings {
      & > * {
        margin-right: 12px;
      }

      svg {
        width: 1.3em;
        height: 1.3em;
      }
    }
  }
</style>
